<%String nav="test"; %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="com.google.appengine.api.users.*" %>
<%
  UserService userService = UserServiceFactory.getUserService();
  User user = userService.getCurrentUser();
  String authURL = (user != null) ? userService.createLogoutURL(request.getRequestURI()): userService.createLoginURL(request.getRequestURI());
%><!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Show Minifier - Visual web page compressor</title>
    <link type="text/css" rel="stylesheet" href="/css/project.css" />
  </head>
  <body>
  <div class="page">
  <div class="head">
    <div class="signin">
      <% if (user != null) { %>
         <%= user.getEmail() %> | <a href="/settings">settings</a> | 
      <% } %>
      <a href="<%= authURL %>">
        <% if (user != null) { %>Log out<% } else  { %>Log in<% } %>
      </a>
    </div>
    <h1>
        Show Minifier
    </h1>
    <ul class="nav">
    	<li><a <% if(nav.equals("home")){%>class="selected" <%}%>href="/">Home</a>
        <li><a <% if(nav.equals("test")){%>class="selected" <%}%>href="/test">New Test</a>
        <li><a <% if(nav.equals("result")){%>class="selected" <%}%>href="/result">Test Result</a>
        <li><a href="http://code.google.com/p/showminifier">Download</a>
    	<!--li><a <% if(nav.equals("performance")){%>class="selected"<%}%> href="/performance">Performance</a-->
    	<!--li><a <% if(nav.equals("help")){%>class="selected"<%}%> href="/help">Help</a-->
        <li><a href="http://groups.google.com/group/showminifier">Forums</a>
    </ul>
    </div>
<div class="body">
	<form id="form" action="/htmlminify">
	<fieldset>
	<legend>Minify web page</legend>
	<p><label class="lb" for="url">Enter Test URL:</label><input id="url" name="url" class="input" tabIndex="10"> (i.e http://www.amazon.com)</p>
	<p id="urlError" class="error hide"></p>
	<p><label class="lb" for="lable">Lable:</label><input id="lable" name="lable" class="input" tabIndex="15">Option (i.e. Amazon)</p>
	<p class="mgl30"> <input type="radio" id="default-options" name="options-setting" value="default-options" checked><label for="default-options">Use default safe options.</label> 
	<input type="radio" id="all-options" name="options-setting" value="all-options"><label for="all-options">Use all options.</label>
	<input type="radio" id="custom-options" name="options-setting" value="custom-options"><label for="custom-options">Custom options.</label>
	<!--a id="moreOptions" href="/faq">What is the option mean?</a--></p>
	<%@ include file="include/options.jsp"%>
	<p><input type="submit" class="submit" tabIndex='30' value="Minify page">
	</fieldset>
	</form>
</div>
<%@ include file="include/foot.jsp"%>
</div>
<script src="/js/display.js"></script>
<script>
(function(){
	var reg = /^http[s]?:\/\//g, 
		input = $('url'),
		container = $('options'),
		options = nodeToArray(container.getElementsByTagName('label')),
		checkbox = nodeToArray(container.getElementsByTagName("input")),
		message= "The input your entry $url$ is not a valid url!", 
		suggest = "<br>Do you means <b id='suggest' tabIndex='11'>http://$url$</b> or <b tabInedx='12'>https://$url$.<b>",
		settings = {};

	each(checkbox,function(i,v){
		settings[v['name']] = v.checked; 
	});

	function validForm(e){
		var reminder = $("urlError");
		if(urlReg.test(input.value)){
			input.className = input.className.replace(/\s?error/g,'') + ' valid';
			reminder.innerHTML = ''; 
			reminder.style.display = "none";
			return true;
		}else{
			reminder.style.display = "block";
			var str = message;
			var found = false;
			if(!reg.test(input.value) && !/\s*/.test(input.value)){
				str = str + suggest;
				found = true;
			}
			//Have some probleam in js regexp.
			//e.g: the expression /\$url\$/ became /$url$/g after jsp compiler.
			str = str.replace(/\\$url\\$/g,input.value.replace(/^.+:\/\//,''));
			reminder.innerHTML = str;
			if(found){
				$('suggest').focus();
				addEvent($('suggest'), 'click', function(e){
					   input.value = !reg.test(input.value) ? 'http://' + input.value.replace(/^.+:\/\//,'') : input.value;
				});
			}
			input.className = input.className.replace(/\s?(?:valid|error)/g,'') + ' error';
		}
		return false;
	}

	addEvent(window, "load", function(e){
		addEvent(input, 'blur', function(e){
			return validForm(e);
		});
		addEvent($('form'), 'submit', function(e){
			if(!validForm(e)){
				input.select();
				input.focus();
				e.preventDefault();
			}
		});
		addEvent($('default-options'),'click',function(e){
			each(checkbox,function(i,v){
				v.checked = settings[v['name']];
			})
		});
		addEvent($('all-options'),'click',function(e){
			each(checkbox,function(i,v){
				v.checked = true;
			})
		});
		addEvent($('custom-options'),'click',function(e){
			$('options').style.display = "block";
		});
		each(options,function(i,v){
			addEvent(v, "mouseover", function(e){
				result = getElementsByClassName(v.parentNode,"quiet");
				 each(result,function(i,v){
					v.style.display = "block";
				});
			});
			addEvent(v, "mouseout", function(e){
				result = getElementsByClassName(v.parentNode,"quiet");
				 each(result,function(i,v){
					v.style.display = "none";
				});
			});
		});
	});
}());
</script>
